<%-- 
    Document   : news
    Created on : Jan 21, 2013, 11:22:38 PM
    Author     : eugene
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="mg" tagdir="/WEB-INF/tags"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>News Manager</title>
        <mg:import file="simplePagination.css"/>
        <mg:import file="jquery.simplePagination.js"/>
        <style type="text/css">
            .newsItem:hover {
                background-color: #F0F0F0;
                border-radius: 3px 3px 3px 3px;
            }
            
            .newsItem{
                margin-top: 10px;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                uic.simpleform({
                    id: 'template',
                    title: 'Add RSS',
                    target: $('#news_loader')
                }).add(uic.control.input({
                    id: 'newsURL',
                    type: 'text',
                    title: 'News Link',
                    rules: {
                        required: true,
                        messages: {
                            required: "Please select an URL"
                        }
                    }
                })).addButton(uic.element.button({
                    onclick: loadNews,
                    id: 'load',
                    title: 'Load News',
                    primary: true
                })).initValidation();
                
                initPagination();
            });
            
            function initPagination() {
                var $items = $(".newsItem");
                var itemsOnPage = 10;
                $("#pagination").pagination({
                    items: $items.length,
                    itemsOnPage: itemsOnPage,
                    cssStyle: 'light-theme',
                    onPageClick: function(pageNumber) {
                        $items.hide();
                        for(var i=(pageNumber-1)*itemsOnPage; i<pageNumber*itemsOnPage; i++) {
                            $($items[i]).show();
                        }
                    },
                    onInit: function() {
                        $items.hide();
                        for(var i=0; i<itemsOnPage; i++) {
                            $($items[i]).show();
                        }
                    }
                });
            }
            
            function loadNews() {
                $.ajax({
                    url: "get_news",
                    type: "POST",
                    data: {url: $("#newsURL").val()},
                    success: function(result) {
                        if(!handleResponse(result).result) return;
                    }
                });
            }
        </script>
    </head>
    <body>
        <div id="news_loader"></div>
        <div id="news" class="news container-fluid sidebar sidebar-container sidebar-inner" style="text-align: justify">
        <div id="pagination"></div>
            <c:forEach items="${newsList}" var="item">
                <div class="newsItem">
                    <div style="line-height: 25px; margin-bottom: 10px">
                        <h4><a target="_blank" href="${item.link}">${item.title}</a> <small>(${item.publicationDate})</small></h4>
                    </div>
                    <div>${item.description}</div>
                </div>
            </c:forEach>
        </div>
    </body>
</html>
